<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>扫码派件</title>
<%@ include file="/pages/wx/baseHead.jsp"%>
<!-- #cb60b3 -->
<style type="text/css">
.btn-my { background: #cb60b3; /* Old browsers */ 
background: -moz-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cb60b3),color-stop(50%, #ad1283), color-stop(100%, #de47ac) ); /* Chrome,Safari4+ */ 
background : -webkit-linear-gradient( top, #cb60b3 0%,#ad1283 50%, #de47ac 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* IE10+ */ 
background: linear-gradient(to bottom, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3',endColorstr='#de47ac', GradientType=0 ); /* IE6-9 */ }
.btn-my{ width: 100px; height: 100px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
.btn-my { background: gray; color:#ffffff; }
</style>
<script type="text/javascript">
	
	$(function(){
		$('#search').keydown(function(e)
				{
					if(e.keyCode==13)
					{
						loadOrder();
					}
				});
		
		initWxSdk();
	});
	
	function initWxSdkOk()
	{
		$("#touchArea")[0].style.background = '#04BE02';
		$("#msg").html('点击扫描条形码/二维码');
	}
	
	function scan()
	{
		wx.scanQRCode({
		    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
		    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
		    success: function (res) {
		    	var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
		    	$("#search").val(result.split(",")[1]);
		    	loadOrder();
			}
		});
	}
	
	
	function loadOrder()
	{
		var orderNo = $("#search").val();
		if(hasBlank(orderNo))
		{
			show("#orderEmpty");
			hide("#orderInfo");
			hide("#scanExpOrder");
			$("#errorMsg").html("请输入正确的快递单");
			return;
		}
		if(isNull(orderNo))
		{
			show("#orderEmpty");
			hide("#orderInfo");
			hide("#scanExpOrder");
			$("#errorMsg").html("请输入条形码");
			return;
		}
		//$("#theform").submit();
		to('${urlBasePath }weixin/user/toExpressDilivery.do?expNo='+orderNo);
	}
	
	/*派件*/
	function dilivery()
	{
		var sn = $("#sn").val();
		debugger;
		confirm('提示','确定要派件？',function(){
			var url = '${urlBasePath}weixin/user/expressDilivery.do';
			$.ajax({
				url:url,
				async:true,
				data:{
					sn:sn
				},
				success:function(ret){
					if(ret.code == '0')
					{
						confirm('提示',ret.msg,function(){
							to("toExpressDilivery.do");
						});
						
					}else
					{
						openDia('提示',ret.msg);
					}
				},
				error:function(){
					alert('系统错误');
				}
			});
			
		});
	}
	
	
</script>

</head>
<body>

<div class="alert alert-info" role="alert">
	<div class="input-group margin-bottom-sm form-inline has-success">
		<span class="input-group-addon" onclick="scan();"><i class="fa fa-qrcode fa-fw"></i>&nbsp;</span>
	<%-- <form action="${urlBasePath }weixin/user/toExpressDilivery.do" name="theform" id="theform" method="POST"> --%>
	  <input class="form-control col-md-3" type="text" value="${expNo }" name="expNo" id="search" placeholder="请输入条形码" style="height: 46px;z-index: 1;" >
	 <!-- </form>  -->
	  <span class="input-group-addon"><a href="javascript:void(0);" onclick="loadOrder();">
	  	<i class="fa fa-search fa-sm"></i></a>
	  </span>
	  </span>
	</div>
	<c:if test="${obj.sn == null }">
		<nav>
		  <ul class="pager" style="padding-top: -10em;">
		  	<button id="touchArea" type="button" class="btn btn-my" onclick="scan();">
		  		<i class="fa fa-qrcode fa-3x voiceCls"></i>
		  	</button>
		  	<div id="msg" style="height: 10px;display: block;padding-top: 10px;">扫描功能暂时无法使用</div>
		  </ul>
		</nav>
	</c:if>
</div>


	<div class="weui_msg"
		<c:if test="${obj.sn != null }">
			style="display:none;"
		</c:if>
		id="orderEmpty">
		   <!-- <div class="weui_icon_area"><i class="weui_icon_safe_warn weui_icon_msg"></i></div> -->
		   <div class="weui_text_area">
		   		<p class="weui_msg_desc" style="color: red;" id="errorMsg">
			   		<c:if test="${expNo != null && expNo != '' }">
		   			没有此订单信息
			   		</c:if>
		   		</p>
		        <p class="weui_msg_desc">请扫描单号或者手动输入正确的单号加载订单信息</p>
		   </div>
	</div>
	
	
	<c:if test="${obj.sn != null }">
		<div class="bd" id="orderInfo" style="margin-top: -20px;">
		<input type="hidden" id="sn" value="${obj.sn }">
	    <div class="weui_panel weui_panel_access">
	    	<div class="weui_panel_hd">
	        	<div align="center">
		        	<a class="weui_btn weui_btn_plain_primary weui_btn_mini " href="tel:${obj.directionPhone }">
		        		<i class="fa fa-phone fa-fw"></i>联系个人
		        	</a>
		        	<a class="weui_btn weui_btn_plain_primary weui_btn_mini " onclick="dilivery();">
		        		<i class="fa fa-truck fa-fw"></i>点击派件
		        	</a>
	       	 	</div>
	        </div>
	        <div class="weui_panel_bd">
	            <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg form-inline">
	                <div class="weui_media_bd">
	                    <h4 class="weui_media_title">快递公司：${obj.expressMercName }</h4>
	                   <p class="weui_media_desc">
	                    	<i class="fa fa-male fa-fw"></i>物品：${obj.goodsType } ${obj.weight } kg 
	                    	&nbsp;
	                    	<i class="fa fa-cny fa-fw"></i>保价：
	                    	<fmt:formatNumber value="${null == obj.supportValue?0:obj.supportValue }" pattern="#,##0.00"/>元
	                    </p>
	                    <p class="weui_media_desc"><i class="fa fa-th-list fa-fw"></i>订单号：${obj.sn }</p>
	                    <p class="weui_media_desc"><i class="fa fa-barcode fa-fw"></i>条形码：<font id="barcodeFont">${obj.barCode }</font></p>
	                    <p class="weui_media_desc"><i class="fa fa-reorder fa-fw"></i>快递单：<font id="expcodeFont">${obj.expressNo }</font></p>
	                </div>
	            </a>
	        </div>
	        
	        <div class="weui_panel_hd" style="font-size: 1.2em;">收件人信息</div>
	        <div class="weui_panel_bd">
	            <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg form-inline">
	                <div class="weui_media_bd">
	                    <h4 class="weui_media_title">收件人：${obj.directionName }</h4>
	                    <p class="weui_media_desc"><i class="fa fa-phone fa-fw"></i>电话：${obj.directionPhone }</p>
	                    <p class="weui_media_desc"><i class="fa fa-location-arrow fa-fw"></i>地址：${obj.directionAddress }</p>
	                </div>
	            </a>
	        </div>
	        
	        <div class="weui_panel_hd" style="font-size: 1.2em;">寄件人信息</div>
	        <div class="weui_panel_bd">
	            <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg form-inline">
	                <div class="weui_media_bd">
	                    <h4 class="weui_media_title">寄件人：${obj.fromName }</h4>
	                    <p class="weui_media_desc"><i class="fa fa-phone fa-fw"></i>电话：${obj.fromPhone }</p>
	                    <p class="weui_media_desc"><i class="fa fa-location-arrow fa-fw"></i>地址：${obj.fromAddress }</p>
	                </div>
	            </a>
	        </div>
	    </div>
	</div>
</c:if>

<div class="pop">
    <i class="fa fa-home fa-lg popi"></i>
</div>

<!-- 引入微信样式代码提示工具开始 -->
<%@ include file="/pages/wx/wxClass.jsp"%>
<%@ include file="/pages/wx/baseBottom.jsp"%>
</body>
</html>

